import { useState, useEffect } from 'react'
import styles from './index.module.less'
import { history } from 'umi'
import type { ReportData, RoleType } from './interface'
import { getLocalStorage } from '@/storage'
import type { ReportType } from '../../entry/interface'

export const GenerateReport = (props: { current: number; type: RoleType }) => {
    // 此页面挂载时，可能接口的数据还未请求结束
    // 通过current变化监听页面变化，从缓存获取数据
    const currentIndex = props.current
    const queryParams = history.location.query as { type: ReportType }
    const reportType = queryParams.type

    const [reportData, setReportData] = useState<ReportData>()

    useEffect(() => {
        let tmpReportData: ReportData
        switch (props.type) {
            case 'department':
                tmpReportData = getLocalStorage('DEPARTMENT_REPORT_DATA')
                break
            case 'trainer':
                tmpReportData = getLocalStorage('TRAINER_REPORT_DATA')
                break
            case 'teacher':
                tmpReportData = getLocalStorage('TEACHER_REPORT_DATA')
                break
        }
        setReportData(tmpReportData)
    }, [props.type, currentIndex])

    const onGenerateReport = () => {
        history.push({
            pathname: '/report/share',
            query: {
                role_type: props.type,
                report_type: reportType,
            },
        })
    }

    return (
        <div className={styles.page}>
            <div className={styles.text}>
                <p>2024年</p>
                {props.type !== 'department' && <p>时间记录了</p>}

                <p className={styles.platform}>
                    {props.type === 'teacher'
                        ? '马兰花创业培训教学管理服务平台'
                        : reportData?.platform}
                </p>

                {props.type === 'department' && (
                    <>
                        <p>{`记录了${reportData?.region || '-'}创业培训工作的点点滴滴`}</p>

                        <div className={styles.splitLine} />

                        <p>2025年</p>

                        <p>我们继续结伴同行</p>
                    </>
                )}

                {props.type !== 'department' && (
                    <>
                        <p>陪伴您的点点滴滴</p>

                        <div className={styles.splitLine} />

                        <p>人才如粒粒种子</p>
                        <p>种子离不开这片沃土</p>
                        <p>2025年</p>
                        <p>我们也要结伴同行</p>
                    </>
                )}
            </div>

            <div className={styles.logo_sign} />

            <div className={styles.generate_btn} onClick={onGenerateReport} />
        </div>
    )
}

export default GenerateReport
